<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableInstance } from 'element-plus'
import { loginLogList } from '../../utils/trueType'
import { useLoginLogStore } from '../../store/loginLog'
import { useSearchLoginLogStore } from '../../store/loginLog/searchLoginLog'
import loginLog from '../../api/loginLog'
import utils from '../../utils/utils'
const searchLoginLogStore = useSearchLoginLogStore()
const loginLogListStore = useLoginLogStore()
const multipleTableRef = ref<TableInstance>()

const selectable = (row: loginLogList) => row.id

async function handleSizeChange() {
  await loginLog.getSpecieLoginLog(searchLoginLogStore.userName, searchLoginLogStore.ipAddress, searchLoginLogStore.loginType, searchLoginLogStore.Time, loginLogListStore.pageNum, loginLogListStore.pageSize).then((res) => {
        loginLogListStore.loginLog = res.data.data
        loginLogListStore.total = res.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        loginLogListStore.changeLoading()
    })
}
const handleCurrentChange = async() => {
  await loginLog.getSpecieLoginLog(searchLoginLogStore.userName, searchLoginLogStore.ipAddress, searchLoginLogStore.loginType, searchLoginLogStore.Time,  loginLogListStore.pageNum, loginLogListStore.pageSize).then((res) => {
        loginLogListStore.loginLog = res.data.data
        loginLogListStore.total = res.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        loginLogListStore.changeLoading()
    })
}
const handleSelectionChange = (val: loginLogList[]) => {
  loginLogListStore.selectedIds = val.map(item => item.id).filter(id => id !== null && id !== undefined) as string[];
}
onMounted(async() => {
  await loginLog.getLoginLogList(loginLogListStore.pageNum, loginLogListStore.pageSize).then((res) => {
    loginLogListStore.loginLog = res.data.data
    loginLogListStore.total = res.data.total
  }).catch(err => {
    console.log(err)
  }).finally(() => {
    loginLogListStore.changeLoading()
  })
})
</script>
<template>
  <el-table ref="multipleTableRef" v-loading="loginLogListStore.loading" :data="loginLogListStore.loginLog" row-key="id" style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" :selectable="selectable" width="55" align="center" header-align="center" />
    <el-table-column property="id" label="访问编号" width="100" align="center" header-align="center" />
    <el-table-column property="username" label="用户名" width="120" align="center" header-align="center" />
    <el-table-column property="loginIp" label="登录IP" width="120" align="center" header-align="center" />
    <el-table-column property="loginAddress" label="登录地址" width="120" align="center" header-align="center" />
    <el-table-column property="userAgent" label="浏览器" width="120" align="center" header-align="center" />
    <el-table-column property="loginSystem" label="操作系统" width="120" align="center" header-align="center" />
    <el-table-column property="status" label="登录状态" width="120" align="center" header-align="center">
      <template #default="scope">
        <el-tag v-if="scope.row.status === 1" type="success">成功</el-tag>
        <el-tag v-else type="danger">失败</el-tag>
      </template>
    </el-table-column>
    <el-table-column property="loginMessage" label="操作信息" width="140" align="center" header-align="center" />
    <el-table-column property="loginTime" label="登录时间" width="auto" align="center" header-align="center">
      <template #default="scope">
        {{ utils.formatDate(scope.row.loginTime) }}
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="loginLogListStore.pageNum" v-model:page-size="loginLogListStore.pageSize" :pager-count="5"
      :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="loginLogListStore.total"
      @update:page-size="handleSizeChange" @update:current-page="handleCurrentChange" />
  </div>
</template>
<style scoped>
.demo-pagination-block {
  display: flex;
  justify-content: end;
  margin-top: 1rem;
}

.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .demo-pagination-block {
    justify-content: center;
  }
  :deep(.el-pagination .el-pagination__sizes)  {
    display: none;
  }
  .demo-pagination-block :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }

}
</style>